<template>
  <view>
    <!-- 1. 搜索模块 -->
    <ugo-search />
    <!-- 2. 分类模块 -->
    <view class="category">
      <!-- 2.1 左侧分类列表 -->
      <!-- scroll-view 滚动容器组件 scroll-y 开启垂直方向滚动 -->
      <scroll-view scroll-y class="category-left">
        <view
          v-for="(item, index) in categoryLeft"
          :key="item.cat_id"
          class="category-left-item"
          @tap="changeActiveIndex(index)"
          :class="{ active: activeIndex === index }"
        >
          {{ item.cat_name }}
        </view>
      </scroll-view>
      <!-- 2.2 右侧分类列表 -->
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y
        @scroll="rightScroll"
        class="category-right"
      >
        <!-- 循环 分组 -->
        <view class="group" v-for="item in categoryRight" :key="item.cat_id">
          <!-- 分组的标题 -->
          <view class="group-title">{{ item.cat_name }}</view>
          <!-- 分区的列表 -->
          <view class="group-list">
            <!-- 循环 页面链接 嵌套 图片 + 文本 -->
            <!-- 注意：小程序页面传参，需要手动拼接字符串 ?key=value&key2=value2 -->
            <navigator
              v-for="goods in item.children"
              :key="goods.cat_id"
              :url="`/pages/goods_list/goods_list?query=${goods.cat_name}&cid=${goods.cat_id}`"
            >
              <image lazy-load :src="goods.cat_icon" mode="aspectFit" />
              <text>{{ goods.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 打印测试用的结构 -->
    <view
      :style="{
        position: 'fixed',
        left: 0,
        top: 0,
        backgroundColor: 'pink',
      }"
    >
      scrollTop:{{ scrollTop }}
      <view>----</view>
      old.scrollTop:{{ old.scrollTop }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 分类数据(总)
      categoryAll: [],
      // 左侧高亮分类下标
      activeIndex: 0,
      // 用于实现返回顶部的变量
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
    }
  },
  // 页面加载
  onLoad() {
    // 调用获取分类数据
    this.getCategoryAll()
  },
  // 方法
  methods: {
    // 获取分类数据
    async getCategoryAll() {
      const res = await uni.$u.http.get('/categories')
      this.categoryAll = res.data.message
    },
    // 点击左侧
    async changeActiveIndex(index) {
      // 修改下标
      this.activeIndex = index
      // 解决view层不同步的问题
      this.scrollTop = this.old.scrollTop
      // view层更新同步后
      await this.$nextTick()
      // 返回顶部
      this.scrollTop = 0
    },
    // 右侧容器滚动事件
    rightScroll(e) {
      // 存储坐标
      this.old.scrollTop = e.detail.scrollTop
    },
  },
  // 计算
  computed: {
    // 计算左侧分类
    categoryLeft() {
      // map 数组映射
      return this.categoryAll.map((v) => {
        return {
          cat_id: v.cat_id,
          cat_name: v.cat_name,
        }
      })
    },
    // 计算右侧分类
    categoryRight() {
      // 如果后端返回数组，就获取对应分类总的 children
      return this.categoryAll.length > 0
        ? this.categoryAll[this.activeIndex].children
        : []
    },
  },
}
</script>

<style lang="scss">
.category {
  width: 100vw;
  /* 🚨注意点1：小程序页面视口是不包含 头部导航 和 底部taBar */
  /* 🚨注意点2：calc 计算函数，加减号两边至少留一个空格，否则不能计算 */
  height: calc(100vh - 44px); /* 100vh 为视口高，44px 为搜索框高 */
  display: flex;
  .category-left {
    width: 182rpx;
    height: 100%;
    .category-left-item {
      height: 100rpx;
      background-color: #f3f3f3;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    // 高亮类名
    .active {
      background-color: #fff;
      color: #ea4350;
      position: relative;
      // 高亮前面的色块
      &::before {
        content: '';
        width: 4rpx;
        height: 44rpx;
        background-color: #ea4350;
        position: absolute;
        left: 0;
      }
    }
  }
  .category-right {
    flex: 1;
    height: 100%;
    .group {
      .group-title {
        font-size: 26rpx;
        text-align: center;
        padding-top: 40rpx;
        // 文字左右的修饰线
        &::before,
        &::after {
          content: '/';
          color: #ccc;
          margin: 0 10rpx;
        }
      }
      // 列表水平排列并换行
      .group-list {
        display: flex;
        flex-wrap: wrap;
        // 导航水平只放3个，一个的宽度为 33.33%
        navigator {
          width: 33.3333%;
          // 设置 flex
          display: flex;
          // flex 方向改为垂直
          justify-content: center;
          // 水平垂直居中排列
          align-items: center;
          flex-direction: column;
          padding: 20rpx 0;
        }
        // 图片定宽高
        image {
          width: 120rpx;
          height: 120rpx;
        }
        // 修改文字大小
        text {
          font-size: 22rpx;
        }
      }
    }
  }
}
</style>
